<template>
<div class="forget-box">
<el-form
      class="forgetform"
      ref="ruleForm2"
      :rules="rules2"
      :model="ruleForm2"
      label-width="80px">
    
        <el-form-item prop="phone" label="手机号">
            <el-input v-model="ruleForm2.phone" @keyup.native="sum(ruleForm2.phone)" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
            <el-input v-model="ruleForm2.yzm">
                <el-button slot="append" type="primary" @click="sendCode()" ref="sendCodeBtn" :disabled="isDisabled">{{buttonName}}</el-button>
            </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
        </el-form-item>

        <el-row class="tx-c">
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="$router.replace('/')">取消</el-button>
        </el-row>
</el-form>
</div>
</template>
<style scoped>
.forget-box {
  width: 500px;
  height: 400px;
  background: #f1f1f1;
  border-radius: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -250px;
}
.forgetform {
  
  padding: 50px 50px;
}
</style>
<script>
import http from "../../../../assets/js/http";

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else {
        var regex = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{8,30}$/;
        if (!regex.test(value)) {
          callback(
            new Error(
              "必须是字母、数字、特殊字符中任意两种组合，且长度在 8 到 30 个字符"
            )
          );
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      }
    };
    return {
      len: 0,
      isDisabled: true,
      buttonName: "发送验证码",
      time: 60,
      ruleForm2: {
        phone: "",
        pass: "",
        checkPass: "",
        yzm: ""
      },
      rules2: {
        phone: [{ required: true, message: "请输入账号", trigger: "blur" }],
        yzm: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  methods: {
    onSubmit() {
      if (this.loading) return;
      this.$refs.ruleForm2.validate(valid => {
        if (valid) {
          this.loading = !this.loading;
          let data = {};
          // if (this.requireVerify) {
          //   data.nameOrTell = this.form.username
          //   data.password = this.form.password
          // } else {
          data.mobileNo = this.ruleForm2.phone;
          data.password = this.ruleForm2.pass;
          data.validateCode = this.ruleForm2.yzm;
          // }
          // if (this.checked) {
          //   data.isRemember = 1
          // } else {
          // }
          console.log(data);
          this.apiPost("login/forgetPassword", data).then(res => {
            if (res.code != 200) {
              this.loading = !this.loading;
              this.handleError(res);
            } else {
              // this.refreshVerify()
              // if (this.checked) {
              //   Cookies.set('rememberPwd', true, { expires: 1 })
              // }
              // this.resetCommonData(res.data);
              _g.toastMsg("success", "修改成功");
              router.push({ path: "/" });
            }
          });
        } else {
          return false;
        }
      });
    },
    sum(val) {
      this.len = val.length;
      if (this.len < 11) {
        this.$refs.sendCodeBtn.disabled = true;
      } else {
        this.$refs.sendCodeBtn.disabled = false;
      }
    },
    sendCode() {
      const data = {
        params: {
          mobileNo: this.ruleForm2.phone
        }
      };
      this.apiGet("login/sendValidateCode", data).then(res => {
        if (res.code != 200) {
          this.loading = !this.loading;
          // _g.toastMsg('success', '发送失败');
          this.handleError(res);
        } else {
          // this.refreshVerify()
          // if (this.checked) {
          //   Cookies.set('rememberPwd', true, { expires: 1 })
          // }
          // this.resetCommonData(res.data)
          // console.log(res.obj);
          _g.toastMsg("success", res.msg);
          //倒计时
          let me = this;
          me.isDisabled = true;
          let interval = window.setInterval(function() {
            me.buttonName = me.time + "秒后重新发送";
            --me.time;
            if (me.time < 0) {
              me.buttonName = "重新发送";
              me.time = 60;
              me.isDisabled = false;
              window.clearInterval(interval);
            }
          }, 1000);
        }
      });
    }
  },
  mixins: [http]
};
</script>

